<template>
  <div class='container'>

    <el-card>
      <span style="color:pink;font-size:12px">by祝楼帅</span><br>
      <el-form :model="searchForm" ref="searchFormRef" label-width="100px">
        <el-row type="flex" justify="space-between">
          <el-col :span="6">
            <el-form-item label="关键字" prop="keyword">
              <el-input v-model="searchForm.keyword" placeholder="根据编号搜索" size="small"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6" style="text-align: right;">
            <el-form-item>
              <el-button @click="clearForm" size="small">清除</el-button>
              <el-button type="primary" @click="getRandomsList" size="small">搜索</el-button>
            </el-form-item>
          </el-col>
        </el-row>

        <el-alert :title="'数据一共'+total+'条'" type="info" show-icon :closable="false" style="margin-bottom:15px">
        </el-alert>

        <el-table :data="randomsList" style="width: 100%">
          <el-table-column prop="id" label="编号" width="220">
          </el-table-column>
          <el-table-column prop="questionType" label="题型" width="80">
            <template v-slot="{row}">
              <div v-if="row.questionType==='1'">单选</div>
              <div v-else-if="row.questionType==='2'">多选</div>
              <div v-else>简答</div>
            </template>
          </el-table-column>
          <el-table-column prop="questionIDs" label="题目编号" width="220">
            <template v-slot="{row}">
              <div v-for="(item,index) in row.questionIDs" :key="index">
                <a href="javascript:;" style="color:#0099ff" @click="openDialog(item.id)">{{item.number}}</a>
              </div>
            </template>
          </el-table-column>
          <el-table-column prop="addTime" label="录入时间" width="180">
          </el-table-column>
          <el-table-column prop="totalSeconds" label="答题时间(s)" width="300">
          </el-table-column>
          <el-table-column prop="accuracyRate" label="正确率(%)" width="300">
          </el-table-column>
          <el-table-column prop="userName" label="录入人" width="280">
          </el-table-column>
          <el-table-column label="操作" width="80">
            <template v-slot="{row}">
              <el-button type="danger" icon="el-icon-delete" plain circle @click="delRandoms(row.id)"></el-button>
            </template>
          </el-table-column>
        </el-table>
        <el-pagination style="text-align: right;margin-top:15px" @size-change="handleSizeChange" background
          @current-change="handleCurrentChange" :current-page="searchForm.page" :page-sizes="[20, 30, 50, 100]"
          :page-size="searchForm.pagesize" layout="prev,pager,next,sizes,jumper" :total="total">
        </el-pagination>
      </el-form>
    </el-card>

    <el-dialog title="题目预览" :visible.sync="topicDialogVisible" width="55%" @close="topicDialogClose">
      <el-row>
        <el-col :span="6" style="margin:10px 0">
          <div v-if="previewobj.questionType==='1'">【题型】：单选题</div>
          <div v-else-if="previewobj.questionType==='2'">【题型】：多选题</div>
          <div v-else>【题型】：简答题</div>
        </el-col>
        <el-col :span="6" style="margin:10px 0">
          【编号】：{{previewobj.id}}
        </el-col>
        <el-col :span="6" style="margin:10px 0">
          <div v-if="previewobj.difficulty==='1'">【题型】：简单</div>
          <div v-else-if="previewobj.difficulty==='2'">【题型】：一般</div>
          <div v-else>【题型】：困难</div>
        </el-col>
        <el-col :span="6" style="margin:10px 0">
          【标签】：{{previewobj.tags}}
        </el-col>
        <el-col :span="6" style="margin:10px 0">
          【学科】：{{previewobj.subjectName}}
        </el-col>
        <el-col :span="6" style="margin:10px 0">
          【目录】：{{previewobj.directoryName}}
        </el-col>
        <el-col :span="6" style="margin:10px 0">
          【方向】：{{previewobj.direction}}
        </el-col>
      </el-row>
      <hr>
      <div>【题干】：</div>
      <div v-html="previewobj.question" style="color:blue"></div>
      <div v-if="previewobj.questionType==='1'">
        单选题 选项：（以下选中的选项为正确答案）
        <div v-for="item in previewobj.options" :key="item.id" style="margin-top: 10px;line-height: 23px;">
          <el-radio @change="radiochange" v-model="radio" :label="item.isRight">
            {{item.title}}
          </el-radio>
        </div>
        <!-- <el-radio class="singlechoice" @change="radiochange" v-model="radio" :label="item.isRight"
          v-for="item in previewobj.options" :key="item.id">
          {{item.title}}
        </el-radio> -->
      </div>
      <div v-else-if="previewobj.questionType==='2'">
        多选题 选项：（以下选中的选项为正确答案）
        <el-checkbox v-for="item in previewobj.options" :key="item.id" v-model="item.checked">
          {{item.title}}
        </el-checkbox>
      </div>
      <div v-else></div>
      <hr>
      <div>
        【参考答案】：
        <el-button type="danger" size="small" @click="clickVideo">视频答案预览</el-button>
        <div class="video" v-if="videoshow">
          <video id="myvideo" :src="previewobj.videoURL" controls autoplay></video>
        </div>
      </div>
      <hr>
      【答案解析】：
      <div v-html="previewobj.answer" style="display:inline-block">
      </div>
      <hr>
      <div>
        【题目备注】：{{previewobj.remarks}}
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="topicDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="topicDialogVisible = false">确 定</el-button>
      </span>
    </el-dialog>

  </div>
</template>

<script>
export default {
  data () {
    return {
      searchForm: {
        keyword: null,
        page: 1,
        pagesize: 20
      },
      randomsList: [],
      topicDialogVisible: false,
      previewobj: {},
      videoshow: false,
      radio: 1,
      total: 0
    }
  },
  methods: {
    async delRandoms (id) {
      const result = await this.$confirm('此操作将永久删除该题组, 是否继续? ', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).catch(err => err)
      if (result !== 'confirm') {
        return this.$message.info('已取消删除')
      }
      await this.$store.dispatch('setRemoveRandoms', id)
      this.getRandomsList()
      this.$message.success('删除成功')
    },
    clearForm () {
      this.$refs.searchFormRef.resetFields()
    },
    handleCurrentChange (newpage) {
      this.searchForm.page = newpage
      this.getRandomsList()
    },
    handleSizeChange (newsize) {
      this.searchForm.pagesize = newsize
      this.getRandomsList()
    },
    topicDialogClose () {
      this.videoshow = false
      this.previewobj = {}
    },
    clickVideo () {
      this.videoshow = true
      // const video = document.getElementById('myvideo')
      // video.play()
    },
    checkchange () {
      if (this.previewobj.questionType === '2') {
        this.previewobj.options.forEach(item => {
          if (item.isRight === 1) {
            item.checked = true
          } else {
            item.checked = false
          }
        })
      }
    },
    radiochange () {
      this.radio = 1
    },
    async openDialog (id) {
      this.topicDialogVisible = true
      const { data: res } = await this.$store.dispatch('getPreviewObj', id)
      this.previewobj = res
      // 也可用数组做,数组里存checkbox得值,checkboxgroup+checkbox
      if (this.previewobj.questionType === '2') {
        this.previewobj.options.forEach(item => {
          if (item.isRight === 1) {
            item.checked = true
          } else {
            item.checked = false
          }
        })
      }
    },
    async getRandomsList () {
      const { data: res } = await this.$store.dispatch('getRandomsList', this.searchForm)
      this.randomsList = res.items
      this.total = res.counts
    }
  },
  created () {
    this.getRandomsList()
  }
}
</script>

<style scoped lang='less'>
.el-card {
  margin: 15px;
}

// /deep/ .singlechoice .el-radio {
//   display: block;
//   margin-top: 10px;
//   line-height: 23px;
//   white-space: normal;
//   margin-right: 0;
// }

/deep/ .el-checkbox {
  display: block;
  margin-top: 10px;
  line-height: 23px;
  white-space: normal;
  margin-right: 0;
}
.video {
  width: 400px;
  height: 300px;
}
video {
  width: 100%;
  height: 100%;
}
</style>
